<template>
  <div class="qufu">
    <div class="center2">
      <ul class="qfpublic">
        <li>曲</li>
        <li>阜</li>
        <li>公</li>
        <li>益</li>
      </ul>
      <div class="welfare">
        <div class="weleft">
          <div class="weimg"><img :src="img" /></div>
          <ul class="weltul">
            <li v-for="(item, index) in list" :key="index">
              <span class="span"></span>
              <router-link
                :to="{ name: 'Chengfruit', params: { id: item.id } }"
                class="link"
                >{{ item.title }}</router-link
              >
            </li>
          </ul>
        </div>
        <!-- <div class="all"> -->
        <div class="weright">
          <div class="weritop" v-for="(item, index) in wel" :key="index">
            <dl>
              <dt><img :src="item.thumb" alt="" /></dt>
              <dd v-html="item.content"></dd>
            </dl>
            <router-link
              :to="{ name: 'Longdetail', params: { id: item.id } }"
              class="more"
              >查看更多 >></router-link
            >
          </div>
        </div>
        <!-- weright / -->
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import $ from "jquery";
export default {
  data() {
    return {
      img: "",
      list: [
        // { txt: "凤眼果怎么吃?它的这些营养...", url: "/Chengfruit" },
        // { txt: "专家推荐:用决明子泡茶最是...", url: "/Chengfruit" },
        // { txt: "常喝薄荷茶好处多多，用来...", url: "/Chengfruit" },
        // { txt: "经期能减肥吗?了解经期饮食...", url: "/Chengfruit" },
        // { txt: "凤眼果怎么吃?它的这些营养...", url: "/Chengfruit" },
        // { txt: "专家推荐:用决明子泡茶最是...", url: "/Chengfruit" },
      ],
      wel: [
        // {
        //   image: require("../assets/index3.png"),
        //   content:
        //     "安徽尚养居健康管理有限公司，是一家集康复理疗、健康养生、保健美容、产品研发、生产、营销于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十分便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等位于大湖名城、创新高地的安徽省会合肥市，交通十分便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等安徽尚养居健康管理有限公司，是一家集康复理疗、健康养生、保健美容、产品研发、生产、营销于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十分便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等位于大湖名城、创新高地的安徽省会合肥市，交通十分便于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十部...",
        //   more: "查看更多 >>",
        // },
        // {
        //   image: require("../assets/index3.png"),
        //   content:
        //     "安徽尚养居健康管理有限公司，是一家集康复理疗、健康养生、保健美容、产品研发、生产、营销于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十分便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等位于大湖名城、创新高地的安徽省会合肥市，交通十分便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等安徽尚养居健康管理有限公司，是一家集康复理疗、健康养生、保健美容、产品研发、生产、营销于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十分便利。公司拥有裹养尚灸注册商标，组织机构完善，部门有产品研发部、市场部、技术部、财务部、人事部、售后服务部等位于大湖名城、创新高地的安徽省会合肥市，交通十分便于一体的高新技术企业，位于大湖名城、创新高地的安徽省会合肥市，交通十部...",
        //   more: "查看更多 >>",
        // },
      ],
    };
  },
  created() {
    axios.get("/yangsheng/sousuo").then((res) => {
      // console.log(res.data.data);
      this.list = res.data.data;
      this.img = res.data.data[0].thumb;
      // console.log(this.res);
    });
    // .catch((err) => {
    //   console.log(err);
    // });
  },
  mounted() {
    axios.post("/Qufugongyi/index").then((res) => {
      this.wel = res.data.data;
      // console.log(this.wel);
    });
    // .catch((err) => {
    //   console.log(err);
    // });
  },
};
</script>
<style scoped>
.qufu {
  background-color: #fce7d7;
  padding: 3rem 0;
}
.center2 {
  width: 80%;
  margin: 0 auto;
}
.qfpublic {
  width: 450px;
  overflow: hidden;
}
.qfpublic li {
  float: left;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: #fff;
  border-radius: 40px;
  margin-right: 10px;
}
.welfare {
  width: 100%;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  background-color: #fce7d7;
}
.welfare .weleft {
  width: 22%;
  padding: 1rem 0;
}
.welfare .weleft .weimg {
  width: 94%;
}
.weleft .weimg img {
  display: block;
  width: 100%;
}
.weltul a {
  font-size: 18px;
  color: #666666;
}
.weltul li {
  margin-top: 15px;
  display: flex;
  align-items: center;
  height: 30px;
  color: #757371;
}
.weltul li .link:hover {
  color: #a70b0a;
  font-size: 20px;
  font-weight: 600;
}
.span {
  width: 18px;
  height: 18px;
  background-color: #b35a43;
  border-radius: 9px;
  margin: 0 10px;
}
.weright {
  width: 73%;
}
.weritop:nth-child(even) dl {
  /* 弹性盒子起点右边 */
  flex-direction: row-reverse;
}
.weritop:nth-child(even) .more {
  float: left;
}
.weright dl {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.weright dl dt {
  width: 35%;
}
.weright dl dd {
  width: 60%;
  color: #5a5653;
  text-indent: 2rem;
  line-height: 1.6rem;
}
.weright dl dt img {
  display: block;
  width: 100%;
}
.weritop {
  overflow: hidden;
}
.weritop .more {
  float: right;
  color: #ab1917;
  padding-bottom: 2rem;
  margin-top: 0.5rem;
}
.weribtm .more {
  float: left;
  padding-left: 50%;
  color: #ab1917;
  padding-bottom: 2rem;
  margin-top: 0.5rem;
}
</style>
